<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试网页</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #photoImg {
        width: 100vw;
      }
    </style>
  </head>
  <body>
    <h2>测试用网页</h2>
    <button id="user">认证信息 mk.queryUser mk.removeUser mk.updateUser</button>
    <button id="pickerPhoto">相册服务 mk.pickerPhoto()</button>
    <button id="pickerCamera">相机服务 mk.pickerCamera()</button>
    <button id="vibrator">震动服务 mk.vibrator()</button>
    <button id="getAreaColumns">省市区数据 mk.getAreaColumns()</button>
    <p></p>
    <img id="photoImg" />
    <script>
      // 认证信息 mk.queryUser mk.removeUser mk.updateUser
      const user = document.querySelector("#user");
      user.addEventListener("click", async () => {
        // console.log(window);
        // console.log(mk);
        // or
        console.log("mk对象", window.mk);
        // 查询用户信息 写入 p 标签
        document.querySelector("p").innerText = JSON.stringify(mk.queryUser());
        // 删除用户信息
        // mk.removeUser();
      });
      // 相册服务 mk.pickerPhoto()
      const pickerPhoto = document.querySelector("#pickerPhoto");
      pickerPhoto.addEventListener("click", async () => {
        // 获取相册图片
        const res = await mk.pickerPhoto();
        console.log(res);
        // 显示 base64 图片，需要添加前缀标识，否则图片无法展示
        const photoImg = document.querySelector("#photoImg");
        photoImg.src = `data:image/jpeg;base64,${res}`;
      });
      // 相机服务 mk.pickerCamera()
      const pickerCamera = document.querySelector("#pickerCamera");
      pickerCamera.addEventListener("click", async () => {
        // 获取 拍照的图片
        const res = await mk.pickerCamera();
        console.log(res);
        // 显示 base64 图片，需要添加前缀标识，否则图片无法展示
        const photoImg = document.querySelector("#photoImg");
        photoImg.src = `data:image/jpeg;base64,${res}`;
      });
      // 震动服务 mk.vibrator()
      const vibrator = document.querySelector("#vibrator");
      vibrator.addEventListener("click", () => {
        mk.vibrator();
      });
      // 省市区数据 mk.getAreaColumns
      const getAreaColumns = document.querySelector("#getAreaColumns");
      getAreaColumns.addEventListener("click", async () => {
        const res = await mk.getAreaColumns();
        console.log(res);
      });
    </script>
    <!-- 引入调试控制台 -->
    <script src="./eruda.min.js"></script>
    <script>
      eruda.init();
    </script>
  </body>
</html>
